【krpano】クリックして画像をスライドさせる

プラグインとして配置した画像をクリックするとスライドして移動させる方法。
スライドした画像をクリックすると元の位置に戻る。
マップなどを配置して、使わない時はスライドして画面の端に置いておいて、必要な時にクリックしてスライドインさせるなど。

【使用するファイル】
xmlファイル
スライドさせる画像 画像サイズ　w200px× h100px

【基本コード】
下記のコードをxmlファイル内に記述
クリックすると右から左へスライド

 <plugin name="button6" url="board.png"
 align="righttop"
 edge="righttop"
 x="-180"
 y="10"
 destpos="-180"
 onclick="switch(destpos,20,-180);tween(x,get(destpos));"
/>

【解説】

 <plugin name="button6" url="board.png"
 align="righttop"
 edge="righttop"
 x="-180"  //横の位置　200pxの画像の20pxだけ画面に出るように配置
 y="10"  //縦の位置
 destpos="-180" //移動した時の位置を設定
 onclick="switch(destpos,20,-180);tween(x,get(destpos));"  //移動を繰り返す位置
/>

【メモ】
destpos=”-180“と
onclick=”switch(destpos,20,-180);tween(x,get(destpos));”
のdestpos,20,-180の数字は合わせる

【サンプル】
縦のスライドの場合

<plugin
 name="button3"
 url="board.png"
 align="rightbottom"
 edge="righttop"
 x="10"
 y="20"
 destpos="20"
 onclick="switch(destpos, 20,110);tween(y,get(destpos));"
/>

【実例】

<krpano version="1.16">

<include url="skin/defaultskin.xml" />

<view hlookat="0" vlookat="0" maxpixelzoom="1.0" fovmax="150" limitview="auto" />

<preview url="mukogawa1.tiles/preview.jpg" />

 

<image type="CUBE" multires="true" tilesize="512" progressive="false">
<level tiledimagewidth="4776" tiledimageheight="4776">
<cube url="mukogawa1.tiles/mres_%s/l4/%0v/l4_%s_%0v_%0h.jpg" />
</level>
<level tiledimagewidth="2388" tiledimageheight="2388">
<cube url="mukogawa1.tiles/mres_%s/l3/%0v/l3_%s_%0v_%0h.jpg" />
</level>
<level tiledimagewidth="1194" tiledimageheight="1194">
<cube url="mukogawa1.tiles/mres_%s/l2/%0v/l2_%s_%0v_%0h.jpg" />
</level>
<level tiledimagewidth="597" tiledimageheight="597">
<cube url="mukogawa1.tiles/mres_%s/l1/%0v/l1_%s_%0v_%0h.jpg" />
</level>
<mobile>
<cube url="mukogawa1.tiles/mobile_%s.jpg" />
</mobile>
</image>

<plugin name="button6" url="oya.png"
align="righttop"
edge="righttop"
x="-180"
y="10"
destpos="-180"
onclick="switch(destpos,20,-180);tween(x,get(destpos));"
/>

</krpano>